<template>
    <div class="three-box" id="three-box"></div>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref } from "vue";
import img from '../../assets/images/1.jpg'
import img1 from '../../assets/images/2.jpg'
import img2 from '../../assets/images/3.jpg'
import img3 from '../../assets/images/4.jpg'
import img4 from '../../assets/images/5.jpg'
import img5 from '../../assets/images/6.jpg'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'

let { proxy } = getCurrentInstance();
let THREE = proxy.$THREE;
// const threeBox = ref();
onMounted(() => {
    initThree();
});

const initThree = () => {
    const threeBox = document.getElementById("three-box");

    const scene = new THREE.Scene();

    const camera = new THREE.PerspectiveCamera(
        75,
        threeBox.clientWidth / threeBox.clientHeight,
        0.1,
        1000
    );
    camera.position.set(0, 1, 3)
camera.lookAt(0, 0, 0)


    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(threeBox.clientWidth, threeBox.clientHeight);
    const orbitControls = new OrbitControls(camera,renderer.domElement) //鼠标交互、左键移动场景、滚轮放大缩小、右键平移
    //Light
    const light = new THREE.DirectionalLight({ color: 0xffffff })
    light.position.set(1, 1, 1)
    light.castShadow = true
    scene.add(light)

    scene.add(new THREE.AmbientLight(0xffffff, 2))

    // Three提供的纹理加载器
    const textureLoader = new THREE.TextureLoader()
    // 导入纹理贴图基础贴图
    const chungeLoader1 = textureLoader.load(img)
    const chungeLoader2 = textureLoader.load(img1)
    const chungeLoader3 = textureLoader.load(img2)
    const chungeLoader4 = textureLoader.load(img3)
    const chungeLoader5 = textureLoader.load(img4)
    const chungeLoader6 = textureLoader.load(img5)
    // 创建立方体
    const geometry = new THREE.BoxGeometry(1, 1, 1)
    const sphere = new THREE.SphereGeometry(0.5)
    const material1 = new THREE.MeshStandardMaterial({
        map: chungeLoader1, // 纹理贴图
    })
    const material2 = new THREE.MeshStandardMaterial({
        map: chungeLoader2, // 纹理贴图
    })
    const material3 = new THREE.MeshStandardMaterial({
        map: chungeLoader3, // 纹理贴图
    })
    const material4 = new THREE.MeshStandardMaterial({
        map: chungeLoader4, // 纹理贴图
    })
    const material5 = new THREE.MeshStandardMaterial({
        map: chungeLoader5, // 纹理贴图
    })
    const material6 = new THREE.MeshStandardMaterial({
        map: chungeLoader6, // 纹理贴图
    })
    const cube = new THREE.Mesh(geometry, [material1,material2,material3,material4,material5,material6])
    cube.position.y = 0.5
    cube.castShadow = true
    scene.add(cube)

    const cube2 = new THREE.Mesh(sphere,material2)
    cube2.position.y = 1.5
    cube.castShadow = true
    scene.add(cube2)

    threeBox.appendChild(renderer.domElement);

    function animate() {

        requestAnimationFrame(animate);

        orbitControls.update()
        renderer.render(scene, camera);
    }

    animate();
}
</script>

<style>
.three-box {
    position: fixed;
    top: 0;
    left: 200px;
    right: 0;
    bottom: 0;
    width: 100%;
}
</style>